<script setup lang="ts">
import { onUnmounted } from 'vue'

defineProps<{
  /** 是否显示 */
  show: boolean
  /** 是否禁止遮罩交互 */
  disableMask?: boolean
}>()

const emit = defineEmits(['update:show'])

onUnmounted(() => emit('update:show', false))
</script>

<template>
  <div
    class="mask-wrapper"
    :class="{ show }"
    @click="!disableMask && $emit('update:show', false)"
  >
    <slot></slot>
  </div>
</template>

<style lang="less" scoped>
.mask-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-color: rgba(#000, .25);
  opacity: 0;
  pointer-events: none;

  transition: opacity .3s;

  &.show {
    opacity: 1;
    pointer-events: all;
  }
}
</style>